Only three lines of code and you have a smooth transition to height: auto
& {
interpolate-size: allow-keywords;
}
p {
transition: 1s;
}
p:not(:hover) {
height: 5lh;
}
The interpolate-size: allow-keywords
is doing all the magic. Read Animate to height: auto; (and other intrinsic sizing keywords) in CSS for more detail.
Subscribe to get the latest posts sent to your email.